<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yoga</title>

    <style>
        body div {
            display: flex;
            flex-direction: column;
        }

        .pointOver:hover {
            /*background-color: bisque;*/
        }

        .page {
            display: flex;
            flex-direction: column;
        }

        #controls label {
            padding: 5px;
            border-bottom: solid 1px #e1e1e1;
        }

        #controls label:hover {
            background-color: bisque;
        }

        #control_tree label {
            padding: 5px;
            /*border-bottom: solid 1px #e1e1e1;*/
        }

        #control_tree label:hover {
            background-color: bisque;
        }
    </style>
    <script src="utils.js"></script>


</head>
<body style="display: flex;flex-direction: column;font-size: small">

<div style="flex-direction: row;">
    <div id="controls" style="width: 200px;height: 640px;border: solid 1px lightgrey;">
        <label onclick="addElement('div')">div</label>
        <label onclick="addElement('lable')">lable</label>
        <label style="margin-bottom: auto" onclick="addElement('image')">image</label>


    </div>

    <div style="min-width:360px;max-width: 360px;height: 640px;margin-left: 10px">
        <div id="device_page" class="page pointOver" style="height: 100%">

        </div>
    </div>

    <div style="height: 640px;min-width:300px;border: solid 1px lightgrey;margin-left: 10px">
        <div style="flex-direction: row; align-items: center;
            padding: 5px;background-color: #eeeeee;
            border-bottom: solid 1px #e1e1e1;border-top: solid 1px #e1e1e1">
            <label style="margin-right: auto">控件树</label>
            <button onclick="showControlTree()">刷新</button>
        </div>

        <div id="control_tree">

        </div>
    </div>

    <div style="height: 640px;border: solid 1px lightgrey;margin-left: 10px;">

        <div>
            <label style="padding: 5px;background-color: #eeeeee;border-bottom: solid 1px #e1e1e1"> 页面属性</label>

            <div style="padding: 8px">
                <div style="flex-direction: row;align-items: center">
                    <label>布局方向(direction):</label>
                    <label style="margin-left: 10px">
                        <input type="radio" name="page_direction" checked
                               onclick="yoga.page.setStyle('flexDirection','column')">column</label>
                    <label style="margin-left: 10px">
                        <input type="radio" name="page_direction"
                               onclick="yoga.page.setStyle('flexDirection','row')">row</label>
                </div>

                <label style="margin-top:8px">内边距(padding):</label>
                <div style="flex-direction: row;margin-top: 8px">
                    <label>top：<input style="width: 42px" type="number" min="0" value="0"
                                      onchange="yoga.page.setStyle('paddingTop',this.value+'px')"></label>
                    <label>right：<input style="width: 42px" type="number" min="0" value="0"
                                        onchange="yoga.page.setStyle('paddingRight',this.value+'px')"></label>
                    <label>bottom：<input style="width: 42px" type="number" min="0" value="0"
                                         onchange="yoga.page.setStyle('paddingBottom',this.value+'px')"></label>
                    <label>left：<input style="width: 42px" type="number" min="0" value="0"
                                       onchange="yoga.page.setStyle('paddingLeft',this.value+'px')"></label>
                </div>
            </div>
        </div>

        <!--    控件属性-->
        <div>
            <div style="flex-direction: row; align-items: center;
            padding: 5px;background-color: #eeeeee;
            border-bottom: solid 1px #e1e1e1;border-top: solid 1px #e1e1e1">
                <label style="margin-right: auto">控件属性（<label id="control_type"></label>）</label>
            </div>

            <div style="padding: 8px">

                <div style="flex-direction: row;align-items: center">
                    <label>宽/高:</label>
                    <label style="margin-left: 10px">width
                        <input id="control_width" style="width: 42px" type="number"
                               onchange="setElementWidthHeight('width',this.value)"></label>
                    <label style="margin-left: 10px">height
                        <input id="control_height" style="width: 42px" type="number"
                               onchange="setElementWidthHeight('height',this.value)"></label>
                </div>

                <div style="flex-direction: row;align-items: center;margin-top: 8px">
                    <label>背景颜色:
                        <input id="control_background_color" style="width: 42px;margin-left: 10px" type="color"
                               onchange="yoga.cElement.setStyle('backgroundColor',this.value)"/>
                    </label>
                </div>

                <div style="flex-direction: row;align-items: center;margin-top: 8px">
                    <label style="flex: 1;flex-direction: row">点击动作:
                        <input id="control_action" style="margin-left: 10px;" type="url"
                               onchange="yoga.cElement.setAction(this.value)"/>
                    </label>
                </div>

                <div style="flex-direction: row;align-items: center;margin-top: 8px">
                    <label>布局方向(direction):</label>
                    <label style="margin-left: 10px">
                        <input id="control_direction_column" type="radio" name="control_direction" checked
                               onclick="yoga.cElement.setStyle('flexDirection','column')">column</label>
                    <label style="margin-left: 10px">
                        <input id="control_direction_row" type="radio" name="control_direction"
                               onclick="yoga.cElement.setStyle('flexDirection','row')">row</label>
                </div>

                <label style="margin-top: 8px">内边距(padding):</label>
                <div style="flex-direction: row;margin-top: 8px">
                    <label>top：
                        <input id="control_padding_top" style="width: 42px" type="number" min="0" value="0"
                               onchange="setElementSpacing('paddingTop',this.value)"></label>
                    <label>right：
                        <input id="control_padding_right" style="width: 42px" type="number" min="0" value="0"
                               onchange="setElementSpacing('paddingRight',this.value)"></label>
                    <label>bottom：
                        <input id="control_padding_bottom" style="width: 42px" type="number" min="0" value="0"
                               onchange="setElementSpacing('paddingBottom',this.value)"></label>
                    <label>left：
                        <input id="control_padding_left" style="width: 42px" type="number" min="0" value="0"
                               onchange="setElementSpacing('paddingLeft',this.value)"></label>
                </div>

                <label style="margin-top: 8px">外边距(margin):</label>
                <div style="flex-direction: row;margin-top: 8px">
                    <label>top：
                        <input id="control_margin_top" style="width: 42px" type="number" value="0"
                               onchange="setElementSpacing('marginTop',this.value)"></label>
                    <label>right：
                        <input id="control_margin_right" style="width: 42px" type="number" value="0"
                               onchange="setElementSpacing('marginRight',this.value)"></label>
                    <label>bottom：
                        <input id="control_margin_bottom" style="width: 42px" type="number" value="0"
                               onchange="setElementSpacing('marginBottom',this.value)"></label>
                    <label>left：
                        <input id="control_margin_left" style="width: 42px" type="number" value="0"
                               onchange="setElementSpacing('marginLeft',this.value)"></label>
                </div>
            </div>
        </div>

    </div>
</div>
<div style="margin-top: 5px">
    <button style="width: 100px" onclick="gen_json.innerHTML= yoga.genJson()">生成Json</button>
    <label style="margin-top: 5px" id="gen_json"></label>
</div>

</body>
<script src="yoga.js"></script>
<script>
    var dragElement;

    document.ondragover = (e) => {
        e.preventDefault();
    };

    document.ondragstart = (e) => {
        dragElement = yoga.findElement(e.target);
        console.log('ondragstart', e.target);
    };

    document.ondrop = (e) => {
        var endElement = yoga.findElement(e.target);
        console.log('ondrop', endElement);
        if (endElement) {
            if(endElement === dragElement){
                return;
            }
            if (endElement === dragElement.parent) {
                return;
            }
            if(dragElement.findElement(endElement)){
                return;
            }

            dragElement.parent.removeElement(dragElement);
            endElement.addElement(dragElement);
        }
    };

    function showControlTree() {
        // control_tree.innerHTML = yoga.refreshElementTree();
        document.getElementById("control_tree").innerHTML='';
        var labels = yoga.refreshElementTree();
        console.log(labels);
        if (labels) {
            labels.forEach((item)=>{
                control_tree.appendChild(item);
            });
        }
    }

    function addElement(tagName) {
        var el = yoga.addElement(tagName);
        // showAttr(el)
    }

    function setElementWidthHeight(attrName, value) {
        var min_value = value;
        if (value === '') {
            min_value = '10px';
        } else {
            value += 'px';
            min_value += 'px';
        }
        yoga.cElement.setStyle(attrName, value);
        yoga.cElement.setAssistStyle('min-' + attrName, min_value)
    }

    function setElementSpacing(attrName, value) {
        if (value !== '') {
            value += "px";
        }
        yoga.cElement.setStyle(attrName, value)
    }

    function showAttr(element) {

        console.log(element.style);

        control_type.innerHTML = element.getElementType();

        control_width.value = getLengthAttr(element, 'width');
        control_height.value = getLengthAttr(element, 'height');

        control_background_color.value = getColorAttr(element, 'backgroundColor');

        control_action.value = element.getAction();

        var direction = element.getStyleValue('flexDirection');
        if (direction === 'row') {
            control_direction_row.checked = true;
        } else {
            control_direction_column.checked = true;
        }

        control_padding_top.value = getLengthAttr(element, 'paddingTop');
        control_padding_right.value = getLengthAttr(element, 'paddingRight');
        control_padding_bottom.value = getLengthAttr(element, 'paddingBottom');
        control_padding_left.value = getLengthAttr(element, 'paddingLeft');

        control_margin_top.value = getLengthAttr(element, 'marginTop');
        control_margin_right.value = getLengthAttr(element, 'marginRight');
        control_margin_bottom.value = getLengthAttr(element, 'marginBottom');
        control_margin_left.value = getLengthAttr(element, 'marginLeft');
    }

    function getLengthAttr(element, attrName) {
        var number = element.getStyleValue(attrName);
        return number ? number.replace('px', '') : '';
    }

    function getColorAttr(element, attrName) {
        var color = element.getStyleValue(attrName);
        return color ? color : '#000000';
    }

    var yoga = new Yoga(document.getElementById('device_page'));
    yoga.setOnElementSelected((el) => {
        showAttr(el);
        showControlTree();
    });
    yoga.setChangeListener(() => {
        gen_json.innerHTML = yoga.genJson();
        showControlTree();
    })

</script>
</html>
